<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-card>
            <el-form >
                <el-form-item  label-width="70px">
<!--                 el-upload上传的组件
                     action：上传的后端地址 controller地址
                     :show-file-list="false"表示只能上传一个文件
   -->
                    <el-upload
                        class="avatar-uploader"
                        action="/user/upload"
                        :on-success="handleAvatarSuccess"
                        :show-file-list="false" >

                    <img v-if="imgsrc" :src="imgsrc" class="avatar-img">
                    <div v-else class="avatar-placeholder">
                        <i class="el-icon-plus avatar-icon"></i>
                    </div>
                    </el-upload>


                </el-form-item>
                 <el-form-item label="姓名" label-width="80px">
                     {{userInfo.username}}
                 </el-form-item>
                <el-form-item label="性别" label-width="80px">
                    {{userInfo.sex == 1 ? '男':'女'}}
                </el-form-item>
                <el-form-item label="手机号" label-width="80px">
                    {{userInfo.tel}}
                </el-form-item>

                <el-form-item label="省份证" label-width="80px">
                    {{userInfo.identity}}
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

            imgsrc:'', // 存储头像的URL
            userInfo:{},
        },
        methods:{
            inPicture(){
                axios.post('/user/inPicture',this.userInfo).then(resp=>{
                    if(resp.data.code==200){

                    }
                })
            },

            handleAvatarSuccess(resp){ //resp统一返回类
                if(resp.code == 200){
                    this.imgsrc=resp.data
                    this.userInfo.imgSrc=this.imgsrc
                    this.inPicture()
                    localStorage.setItem("userInfo",JSON.stringify(this.userInfo))
                }
            },


        },
        created(){
            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            if(this.userInfo.imgSrc!=null){
                this.imgsrc=this.userInfo.imgSrc
            }
        }
    })
</script>
<style>
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
        overflow: hidden;
        width: 100px; /* 根据需要调整大小 */
        height: 100px; /* 根据需要调整大小 */
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8c939d;
        font-size: 24px;
    }

    .avatar-icon {
        cursor: pointer;
    }
</style>
</html>